<template>
  <div id="tags-view-container" class="tags-view-container">
    <HappyScroll
      ref="scrollContainer"
      color="rgba(6,6,13,0.3)"
      size="5"
      resize
      :scroll-left="scrollLeft"
      hide-vertical
    >
      <div id="tags-view-wrapScroll" class="tags-view-wrapScroll">
        <div
          @click="fnHref(tag,$event)"
          v-for="(tag,index) in visitedViews"
          :data-path="tag.path"
          :class="[tag.path == $route.path ? 'tagViewActive' : '', 'tag-item']"
        >
          {{tag.title}}
          <i
            class="el-icon-close closeHover"
            v-if="index > 0"
            @click.prevent.stop="fnClose(tag)"
          ></i>
        </div>
      </div>
    </HappyScroll>
  </div>
</template>

<script>
import { HappyScroll } from "vue-happy-scroll";
// 引入css，推荐将css放入main入口中引入一次即可。
import "vue-happy-scroll/docs/happy-scroll.css";
export default {
  name: "TagViews",
  data() {
    return {
    };
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagViews.visitedViews;
    },
    menu(){
      return localStorage.getItem("menu") ? JSON.parse(localStorage.getItem("menu")) : []
    },
    scrollLeft(){
      return this.$store.state.tagViews.scrollLeft
    }
  },
  mounted() {
    this.initLeft();
  },
  methods: {
    /*
    * 重新设置位置
    * */
    initLeft(){
      this.$nextTick(() => {
          var container = document.getElementById("tags-view-wrapScroll");
          var childs = container.children;
          var width = window.innerWidth - document.querySelector('.scrollbar-wrapper').clientWidth;
          var initWidth = 30;
          if (childs.length > 0) {
            for (let i = 0; i < childs.length; i++) {
              initWidth += childs[i].getBoundingClientRect().width + 5;
              if(childs[i].getAttribute('data-path') == this.$route.path){
                break;
              }
            }
            var scrollLeft = initWidth - width;
            var scrollLefts = scrollLeft <= 0 ? 0 : scrollLeft
            this.$store.commit('tagViews/changeScroll', scrollLefts)
          }
      });
    },
    /*
     * @desc 点击tag跳转
     * @params
     * {Object} tag 路由数据
     * */
    fnHref(tag, e) {
      this.$router.push({
        path: tag.path
      });
    },
    /*
     * @desc 关闭标签
     * @params
     * {Object} tag 关闭的标签数据
     * */
    fnClose(tag) {
      let index = this.visitedViews.findIndex(item => {
        return item.path == tag.path;
      });
      if (index != -1) {
        let arr = JSON.parse(JSON.stringify(this.visitedViews));
        let beforeRoute = arr[index - 1];
        arr.splice(index, 1);
        this.$store.commit("tagViews/delVisitedView", arr);
        localStorage.setItem("menu", JSON.stringify(arr));
        if (beforeRoute.path != this.$route.path) {
          this.$router.push(beforeRoute.path);
        }
      }
    }
  },
  watch: {
    /*
     * @desc 监听tag标签变化，从而设置父级宽度，保证出现滚动条
     * */
    visitedViews: {
      handler() {
        this.$nextTick(() => {
          var container = document.getElementById("tags-view-wrapScroll");
          var tags = document.getElementById("tags-view-container");
          var childs = container.children;
          var width = 0;
          if (childs.length > 0) {
            for (let i = 0; i < childs.length; i++) {
              width += childs[i].getBoundingClientRect().width;
            }
          }
          container.style.width = width + 300 + "px";
        });
      },
      deep: true
    },
  },
  components: {
    HappyScroll
  }
};
</script>

<style scoped>
.tags-view-container {
  width: 100%;
  height: 40px !important;
  box-sizing: border-box;
  padding-right: 20px;
  position: fixed;
  background-color: #fff;
  top: 60px;
  /* box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); */
}
.tag-item {
  display: inline-block;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  margin-left: 5px;
  float: left;
  margin-top: 3px;
}
.tags-view-wrapScroll {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.happy-scroll-bar {
  display: none;
  transition: all linear 0.3s;
}
.tags-view-container:hover .happy-scroll-bar {
  display: block;
}
.tagViewActive {
  background-color: #42b983;
  border-color: #42b983;
  color: #fff;
}
.tagViewActive:before {
  content: "";
  background: #fff;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 2px;
}
.el-icon-close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: 100% 50%;
  vertical-align: 2px;
}
.el-icon-close:before {
  transform: scale(0.6);
  display: inline-block;
  vertical-align: -3px;
}
.el-icon-close:hover {
  background-color: #b4bccc;
  color: #fff;
}
.closeHover {
}
</style>
